<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../css/main.css">
    <title></title>
<!--
    <style>
        html, body {
            height: 100%;
            width: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei";
            color: #3c3c3c;
        }

        .select-address  .title-address {
            height: 45px;
            letter-spacing: 5px;
            margin-bottom: 2px;
        }

        .select-address .title-address div {
            height: 100%;
            float: left;
            text-align: center;
            line-height: 45px
        }

        .address-list {  width: 100%;}

        .select-address  .address-list li {
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
            line-height: 2;
        }

        a {
            text-decoration: none;
        }

        .select-address .address-info a {
            font-size: 20px;
            border: 1px solid #e63e58;
            padding: 0 5px;
            border-radius: 3px;
            color: #e63e58;
            min-width: 42px;
            height: 25px;
            line-height: 22px;
        }

        .select-address .address-info {
            width: 80%;
        }

        .select-address .selected {
            min-width: 20%;
        }

        .select-address  .address-tel {
            float: right
        }

        .select-address .address-info > p {
            font-size: 20px;
        }

        .select-address .address-addr {
            /*width: 230px;*/
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 18px;
            margin-left: 5px;
        }

        .select-address  .address-info > div {
            display: flex;
            align-items: center;
        }

        .select-address .se {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 20px auto;
            border: 1px solid #B3B3B3;
            box-sizing: inherit;
        }

       .select-address .select {
            background: url(../images/select.png) no-repeat center;
            background-size: contain;
            border: 1px solid #e63e58;
        }
        .select-footer{
            position: fixed;
            width: 100%;
            height:18vw;
            bottom: 0;
            background: #FFF;
            z-index: 111;
            display: flex;
            justify-content: space-around;
        }
        .select-footer a{
            width: 45%;
            text-align: center;
            font-size: 22px;
            margin: 2vw 0;
            line-height: 14vw;
            border-radius: 5px;
        }
        .select-footer .add{
            color:#B3B3B3;
            border: 1px solid #B3B3B3;
        }
        .select-footer .submit{
            color: white;
            background:#e63e58 ;
        }
    </style>
-->
</head>
<body>
<div class="select-address">
    <div class="title-address">
        <div class="menu" style="width: 35%">
            <a href="javascript:void(0)" class="address-return" ></a>
            <a href="javascript:void(0)" class="address-close"></a>
        </div>
        <div style="font-size: 22px;width: 30%">商品惠</div>
    </div>
    <div style="height: 50px"></div>
    <ul class="address-list">
        <li>
            <div class="selected"><span class="se select"></span></div>
            <div class="address-info">
                <p><span class="address-name">123qewd</span><span class="address-tel">15532491061</span></p>
                <div>
                    <a href="javascript:void(0)">默认</a>
                    <p class="address-addr">北京北京市朝阳区嫁狗随狗破阿尔法卡</p>
                </div>
            </div>
        </li>
        <li>
            <div class="selected"><span class="se"></span></div>
            <div class="address-info">
                <p><span class="address-name">123qewd</span><span class="address-tel">15532491061</span></p>
                <div>
                    <a href="javascript:void(0)">默认</a>
                    <p class="address-addr">北京北京市朝阳区嫁狗随狗破阿尔法卡</p>
                </div>
            </div>
        </li>
        <li>
            <div class="selected"><span class="se"></span></div>
            <div class="address-info">
                <p><span class="address-name">123qewd</span><span class="address-tel">15532491061</span></p>
                <div>
                    <a href="javascript:void(0)">默认</a>
                    <p class="address-addr">北京北京市朝阳区嫁狗随狗破阿尔法卡</p>
                </div>
            </div>
        </li>
        <li>
            <div class="selected"><span class="se"></span></div>
            <div class="address-info">
                <p><span class="address-name">123qewd</span><span class="address-tel">15532491061</span></p>
                <div>
                    <a href="javascript:void(0)">默认</a>
                    <p class="address-addr">北京北京市朝阳区嫁狗随狗破阿尔法卡</p>
                </div>
            </div>
        </li>
        <li>
            <div class="selected"><span class="se"></span></div>
            <div class="address-info">
                <p><span class="address-name">123qewd</span><span class="address-tel">15532491061</span></p>
                <div>
                    <a href="javascript:void(0)">默认</a>
                    <p class="address-addr">北京北京市朝阳区嫁狗随狗破阿尔法卡</p>
                </div>
            </div>
        </li>


    </ul>
    <div style="height: 20vw"></div>
</div>
<div class="select-footer ">
    <a href="from.html" class="add">新增地址</a> <a href="javascript:void(0)" class="submit">确定</a>
</div>

<script src="../js/jquery.min.js"></script>
<script>

    $(function () {
        var name
        var tel
        var address
        $('.se').click(function () {
            $(this).addClass('select').parents('li').siblings().children('.selected').children().removeClass('select')
        })
        $('.submit').click(function(){

           name=  $('.select').parent().siblings().find('.address-name').text()
           tel=$('.select').parent().siblings().find('.address-tel').text()
           address=$('.select').parent().siblings().find('.address-addr').text()
            console.log(name,tel,address)
        })
$('.address-return').click(function(){
    history.go(-1)
})
    })
</script>
</body>
</html>